<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>3.事件传参</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			绑定事件传参总结：
					1.不传参数，那就写：@click="showMsg" ，showMsg会收到一个event（事件对象）
					2.传一个参数，那就写：@click="showMsg(6)" ，showMsg会收到一个6
					3.传多个参数，那就写：@click="showMsg(6,7,8)" ，showMsg会收到：6、7、8
					4.传参同时还想用事件对象，那就写：@click="showMsg($event,6)"，showMsg会收到：事件对象、6
					5.注意：传参时，当然也可以传递data中的数据，例如@click="showMsg(qwe,name)"
		-->
		<!-- 准备好一个容器-->
		<div id="demo">
			<h2>学校名：{{name}}</h2>
			<!-- 只是绑定事件，不传参 -->
			<button @click="showMsg1">点我展示信息1</button> <br><br>
			<!-- 传1个参数 -->
			<button @click="showMsg2(666)">点我展示信息2</button> <br><br>
			<!-- 传参数同时还要使用event -->
			<button @click="showMsg3(777,$event)">点我展示信息3</button> <br><br>
			<!-- 传多个参数 -->
			<button @click="showMsg4(111,333,555,777)">点我展示信息4</button> <br><br>
			<!-- 传递vm上的属性作为参数 -->
			<button @click="showMsg5(qwe,name)">点我展示信息5</button>

			<!-- 下面这行代码，没人会这么写，因为既然不传参就不要写()，这么写会造成event丢失 -->
			<!-- <button @click="showMsg5()">点我展示信息5</button> -->
			<!-- 下面这行代码，没人会这么写，因为和@click="showMsg5完全是等价的 -->
			<!-- <button @click="showMsg5($event)">点我展示信息5</button> -->
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			new Vue({
				el:'#demo',
				data:{
					name:'尚硅谷',
					qwe:678,
				},
				methods:{
					showMsg1(event){
						// console.log(event)
						alert('欢迎来到尚硅谷！')
					},
					showMsg2(a){
						alert(a)
					},
					showMsg3(a,event){
						console.log(event) //事件对象
						alert(a)
					},
					showMsg4(a,b,event,c,d){
						console.log(a,b,event,c,d) //事件对象
						alert(b)
					},
					showMsg5(a,b){
						console.log(a,c)
						// alert('消息5')
					}
				}
			})
		</script>
	</body>
</html>